<template>
  <div>
    <el-table :data="studentInfoList" style="width: 100%">
      <el-table-column prop="id" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="score" label="成绩">
        <template #default="{ row }">
          <el-tag :type="row.score >= 60 ? 'success' : 'danger'">
            {{ row.score >= 60 ? '及格' : '挂科' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dorm" label="宿舍" />
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <el-button size="small" type="primary" @click="editInfo(row, $index)">编辑</el-button>
          <el-popconfirm title="请确认是否删除?" @confirm="confirmDelete($index)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div class="summary">
      <h4>及格人数：{{ passSummary }}</h4>
      <h4>及格率：{{ passRate }}</h4>
    </div>

    <el-dialog v-model="editDialogVisible" title="编辑学生信息">
      <el-form :model="studentInfoObject" label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="studentInfoObject.id" disabled />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="studentInfoObject.name" />
        </el-form-item>
        <el-form-item label="成绩">
          <el-input v-model="studentInfoObject.score" type="number" />
        </el-form-item>
        <el-form-item label="宿舍">
          <el-input v-model="studentInfoObject.dorm" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="primary" @click="confirmEdit">修改</el-button>
        <el-button size="small" @click="editDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { getStudentInfos } from '@/api/studentApi';
import { ElMessage } from 'element-plus';

const studentInfoList = ref([])
const editDialogVisible = ref(false)
const editIndex = ref(-1)
const studentInfoObject = ref({
  id: '',
  name: '',
  score: 0,
  dorm: ''
})

onMounted(() => {
  loadStudentInfos()
})

const loadStudentInfos = () => {
  getStudentInfos().then(response => {
    studentInfoList.value = response.data
  }).catch(error => {
    console.error(error)
    ElMessage.error('获取学生信息失败!')
  })
}

const editInfo = (info, index) => {
  editDialogVisible.value = true
  editIndex.value = index
  studentInfoObject.value = { ...info }
}

const confirmEdit = () => {
  studentInfoList.value[editIndex.value] = { ...studentInfoObject.value }
  editDialogVisible.value = false
  ElMessage.success('修改成功')
}

const confirmDelete = (index) => {
  studentInfoList.value.splice(index, 1)
  ElMessage.success('删除成功')
}

const passSummary = computed(() => {
  return studentInfoList.value.filter(item => item.score >= 60).length
})

const passRate = computed(() => {
  const total = studentInfoList.value.length
  const pass = studentInfoList.value.filter(item => item.score >= 60).length
  return total > 0 ? ((pass / total) * 100).toFixed(2) + '%' : '0%'
})
</script>

<style scoped>
.summary {
  margin-top: 20px;
  text-align: left;
}

h4 {
  margin: 10px 0;
}
</style>
